<template>
    <div class="category-container">
        <!-- 动画Hero区域 - 毛玻璃效果 -->
        <div class="hero-section" :style="{ backgroundImage: `url(${getCategoryBackground()})` }">
            <div class="hero-glass-effect"></div>
            <div class="hero-content">
                <h1 class="hero-title">{{ flldeli.categoryName }}</h1>
                <p class="hero-subtitle">{{ flldeli.description || '探索精彩内容' }}</p>
            </div>
        </div>

        <!-- 文章网格 -->
        <div class="article-container" v-infinite-scroll="load" infinite-scroll-delay="200"
            infinite-scroll-distance="50" infinite-scroll-immediate="false">
            <!-- 空状态展示 -->
            <div v-if="homeList.length === 0" class="empty-state">
                <el-empty description="暂无文章" :image-size="200">
                    <template #image>
                        <img src="" alt="No content" />
                    </template>
                    <el-button type="primary">返回首页</el-button>
                </el-empty>
            </div>

            <!-- 文章卡片网格 -->
            <div class="article-grid">
                <div v-for="item in homeList" :key="item.id" class="article-card" @click="openDetail(item.id)">
                    <div class="card-image-wrapper">
                        <el-image class="card-image" :src="imgUrl + item.articleImg" fit="cover" lazy>
                            <template #error>
                                <div class="image-placeholder">
                                    <el-icon>
                                        <Picture />
                                    </el-icon>
                                </div>
                            </template>
                        </el-image>
                        <div class="image-overlay"></div>
                        <el-tag class="article-tag" :type="getRandomTagType()">{{ item.categoryName }}</el-tag>
                    </div>

                    <div class="card-content">
                        <h3 class="article-title">{{ item.articleTitle }}</h3>
                        <p class="article-excerpt">{{ item.articleExcerpt }}</p>

                        <div class="article-meta">
                            <div class="meta-item">
                                <el-icon>
                                    <Timer />
                                </el-icon>
                                <span>{{ $filters.timeFilter(item.createTime) }}</span>
                            </div>
                            <div class="meta-item">
                                <el-icon>
                                    <View />
                                </el-icon>
                                <span>{{ item.viewCount }} 阅读</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 加载状态 -->
            <div v-if="loading" class="loading-container">
                <el-skeleton :rows="3" animated />
            </div>

            <!-- 加载更多按钮 -->
            <div class="load-more" v-if="homeList.length > 0 && homeList.length < total">
                <el-button :loading="loading" @click="load" type="primary" plain>加载更多</el-button>
            </div>

            <!-- 底部提示信息 -->
            <div class="end-message" v-if="homeList.length >= total && homeList.length > 0">
                <el-divider>
                    <el-icon>
                        <StarFilled />
                    </el-icon>
                    已经到底啦
                    <el-icon>
                        <StarFilled />
                    </el-icon>
                </el-divider>
            </div>
        </div>

        <!-- 返回顶部按钮 -->
        <el-backtop :right="40" :bottom="40">
            <div class="backtop-box">
                <el-icon>
                    <ArrowUp />
                </el-icon>
            </div>
        </el-backtop>
    </div>
</template>

<script setup>
import { ref, h, onMounted, computed } from "vue"
import { listHome } from "@/api/bk/home";
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router';
import useCounter from '@/stores/counter'
import { getCategory } from "@/api/bk/category";
import { Timer, View, Picture, ArrowUp, StarFilled } from '@element-plus/icons-vue'

const props = defineProps({
    id: {
        type: String,
        required: true
    }
});

const flldeli = ref({})
const counterStore = useCounter()
const categoryId = ref()
const router = useRouter();
const loading = ref(false);

const imgUrl = import.meta.env.VITE_API_BASE_URL
const homeList = ref([])
const total = ref(0);
const queryParams = ref({
    pageNum: 1,
    pageSize: 6, // 增加页面大小以获得更好的网格布局
    categoryId: null
})

// 分类背景图片（在生产环境中可以映射到实际的分类ID）
const categoryBackgrounds = {
    default: 'https://images.unsplash.com/photo-1519681393784-d120267933ba',
    tech: 'https://images.unsplash.com/photo-1518770660439-4636190af475',
    travel: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e',
    food: 'https://images.unsplash.com/photo-1504674900247-0877df9cc836',
    lifestyle: 'https://images.unsplash.com/photo-1511988617509-a57c8a288659'
}

// 根据分类获取背景（占位符逻辑）
function getCategoryBackground() {
    // 在生产环境中，将其映射到实际的分类数据
    if (flldeli.value?.id) {
        return categoryBackgrounds[flldeli.value.categoryName] || categoryBackgrounds.default;
    }
    return categoryBackgrounds.default;
}

// 获取随机标签类型以增加视觉多样性
function getRandomTagType() {
    const types = ['', 'success', 'warning', 'info'];
    return types[Math.floor(Math.random() * types.length)];
}

/** 查询文章列表 */
async function getList() {
    loading.value = true;
    queryParams.value.categoryId = props.id;

    try {
        const response = await listHome(queryParams.value);
        homeList.value = response.rows;
        total.value = response.total;
    } catch (error) {
        console.error("获取文章列表失败:", error);
        ElNotification({
            title: '错误',
            message: '获取文章列表失败',
            type: 'error',
        });
    } finally {
        loading.value = false;
    }
}

// 获取分类信息
const getfll = async () => {
    categoryId.value = props.id;
    try {
        const response = await getCategory(categoryId.value);
        flldeli.value = response.data;
        document.title = `${flldeli.value.categoryName} - 博客分类`;
    } catch (error) {
        console.error("获取分类信息失败:", error);
    }
}

// 加载更多文章
async function load() {
    // 如果已经在加载或所有数据已加载完毕，则返回
    if (loading.value || homeList.value.length >= total.value) {
        if (homeList.value.length >= total.value && homeList.value.length > 0) {
            ElNotification({
                title: '注意',
                duration: 3000,
                message: h('i', { style: 'color: teal' }, '已经刷了到底了哦~(*^_^*)'),
            })
        }
        return;
    }

    loading.value = true;
    queryParams.value.pageNum += 1;

    try {
        const response = await listHome(queryParams.value);
        // 添加轻微延迟以获得更平滑的用户体验
        setTimeout(() => {
            homeList.value = homeList.value.concat(response.rows);
            total.value = response.total;
            loading.value = false;
        }, 600);
    } catch (error) {
        loading.value = false;
        console.error("加载更多文章失败:", error);
    }
}

// 打开文章详情
const openDetail = (id) => {
    // 在新窗口中打开
    const url = router.resolve({
        name: 'Detail',
        params: { id }
    }).href;
    window.open(url, '_blank');
};

// 初始化
onMounted(() => {
    getfll();
    getList();
});
</script>

<style lang="scss" scoped>
// 变量
$primary-color: #4e54c8;
$secondary-color: #8f94fb;
$text-color: #333;
$light-text: #666;
$background-color: rgba(248, 249, 250, 0.7); // 半透明背景
$card-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
$border-radius: 16px;
$transition-speed: 0.3s;

.category-container {
    position: relative;
    min-height: 100vh;
    background-color: transparent; // 透明背景，以显示全局背景
}

// Hero 区域样式 - 毛玻璃效果
.hero-section {
    position: relative;
    height: 40vh;
    min-height: 300px;
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
    border-radius: 0 0 30px 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

// 毛玻璃效果
.hero-glass-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1); // 微透明白色背景
    backdrop-filter: blur(10px); // 关键：模糊效果
    -webkit-backdrop-filter: blur(10px); // Safari 支持
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 1;

    // 渐变叠加
    background: linear-gradient(135deg, rgba($primary-color, 0.3), rgba($secondary-color, 0.3));
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 800px;
    padding: 0 20px;
}

.hero-title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 1s ease-out;
}

.hero-subtitle {
    font-size: 18px;
    font-weight: 400;
    opacity: 0.9;
    margin-top: 0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease-out 0.2s both;
}

// 文章容器 - 增加毛玻璃效果
.article-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 20px 40px;
    background: rgba(255, 255, 255, 0.6); // 半透明背景
    backdrop-filter: blur(5px); // 轻微模糊
    -webkit-backdrop-filter: blur(5px);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

// 文章网格
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

// 文章卡片 - 轻微毛玻璃效果
.article-card {
    background: rgba(255, 255, 255, 0.8);
    border-radius: $border-radius;
    overflow: hidden;
    box-shadow: $card-shadow;
    transition: transform $transition-speed ease, box-shadow $transition-speed ease;
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);

    &:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);

        .card-image {
            transform: scale(1.05);
        }

        .image-overlay {
            opacity: 0.5;
        }

        .article-title {
            color: $primary-color;
        }
    }
}

.card-image-wrapper {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    opacity: 0.3;
    transition: opacity $transition-speed ease;
}

.image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgba(240, 242, 245, 0.7);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    .el-icon {
        font-size: 48px;
        color: #d9d9d9;
    }
}

.article-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.card-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.article-title {
    font-size: 20px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.4;
    color: $text-color;
    transition: color $transition-speed ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-excerpt {
    color: $light-text;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-meta {
    display: flex;
    justify-content: space-between;
    color: #888;
    font-size: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(238, 238, 238, 0.5);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 4px;

    .el-icon {
        font-size: 16px;
    }
}

// 空状态
.empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

// 加载和结束消息
.loading-container {
    margin: 30px 0;
    padding: 0 15%;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 12px;
    padding: 15px;
}

.load-more {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.end-message {
    margin: 40px 0;
    color: #999;
    text-align: center;

    .el-divider {
        width: 80%;
        max-width: 500px;
        margin: 0 auto;
    }

    .el-icon {
        color: $secondary-color;
        margin: 0 8px;
    }
}

// 返回顶部按钮 - 毛玻璃效果
.backtop-box {
    height: 100%;
    width: 100%;
    background: rgba($primary-color, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    text-align: center;
    line-height: 40px;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);

    .el-icon {
        font-size: 20px;
    }
}

// 动画效果
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

// 响应式调整
@media (max-width: 768px) {
    .hero-section {
        height: 30vh;
    }

    .hero-title {
        font-size: 24px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .article-grid {
        grid-template-columns: 1fr;
    }

    .article-container {
        padding: 15px;
        border-radius: 15px;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .article-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
</style>